<!-- 分院个人中心 -->
<template>
  <div class="me">
    <div class="hom_back">
      <img src="../../../static/image/head.png" />
      <span class="goout" @click="goout()">
        <img
          src="../../../static/image/goout.png"
          alt
          style="
            margin-right: 0.05rem;
            width: 0.26rem;
            height: 0.26rem;
            margin-top: 0.05rem;
          "
        />退出登录
      </span>
    </div>
    <div class="me_top">
      <div class="me_name">{{ nickName }}</div>
    </div>
    <div class="account">
      <div class="balance">
        <div class="banl">
          <div>
            <span> <img src="../../../static/image/ZH.png" /> </span>账户
          </div>
          <div>余额</div>
        </div>
        <div class="look_status" @click="lookStatus">查看提现状态</div>
        <div class="txt2" @click="bili()">设置抽成比例</div>
      </div>
      <div class="balance2">
        <div v-if="balance == null">￥0</div>
        <div v-else>￥{{ balance / 100 }}</div>
        <div></div>
        <div @click="Cashwithdrawal(balance)">提现</div>
      </div>
    </div>

    <div class="topTabSwiper">
      <div class="tab">订单</div>
    </div>
    <div
      class="ranking"
      v-infinite-scroll="getCardList"
      infinite-scroll-disabled="moreLoading"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false"
    >
      <div
        class="ran_oitem"
        v-for="(item, index) in orderList"
        :key="index"
        @click="Details(item)"
      >
        <span
          style="
            margin-left: 0.32rem;
            width: 3.58rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          "
          >{{ item.goodsName }}</span
        >
        <span style="margin-right: 0.14rem; color: #666666;">{{
          item.createdAt | formatDate
        }}</span>
      </div>
    </div>
    <div class="ranking" v-show="nothing" style="margin-bottom: 2rem;">
      <img src="../../../static/image/nothing.png" alt />
      <div class="ranking_zi">没有更多数据</div>
    </div>

    <!-- 分院二维码 -->
    <div class="pop" v-show="pop">
      <div class="pop_message">
        <div class="pop_oitem">
          <div class="pop_tuiguang">
            <span>一级推广</span>
            <input
              type="number"
              v-model="inp1"
              oninput="if(value>25)value=25"
              οnkeyup="value=value.replace(/[^\d]/g,'')"
            />
            <span>%</span>
          </div>
          <div class="pop_tuiguang">
            <span>二级推广</span>
            <input
              type="number"
              v-model="inp2"
              oninput="if(value>25)value=25"
              οnkeyup="value=value.replace(/[^\d]/g,'')"
            />
            <span>%</span>
          </div>
          <div class="pop_txt">说明：一级推广和二级推广不能超过25%。</div>
        </div>
        <div class="pop_di">
          <button hover-class="wsui-btn__hover_list" @click="close">
            取消
          </button>
          <button hover-class="wsui-btn__hover_list" @click="ok">
            确定
          </button>
        </div>
      </div>
    </div>
    <div class="txorder" v-show="listStatus">
      <div class="txorder_pop">
        <div class="txorder_list">
          <span>金额</span>
          <span>时间</span>
          <span>状态</span>
        </div>
        <div class="null" v-if="cashlist.length == 0">
          <img src="../../../static/image/nothing.png" alt />
          <div class="ranking_zi">没有更多数据</div>
        </div>
        <div class="txorder_title" v-else>
          <div
            class="txorder_li"
            v-for="(item, index) in cashlist"
            :key="index"
          >
            <span>￥{{ item.amount }}</span>
            <span v-if="item.status == 1">{{
              item.cashTime | formatDate
            }}</span>
            <span v-if="item.status == 2">{{
              item.passTime | formatDate
            }}</span>
            <span v-if="item.status == 1" class="unfinished">审核中</span>
            <span v-if="item.status == 2" class="success">提现成功</span>
          </div>
        </div>
        <button @click="Close">退出</button>
      </div>
    </div>
    <footer>
      <Footers></Footers>
    </footer>
  </div>
</template>
<script>
import axios from "axios";
import {
  branchOwner,
  branchorder,
  viewBranchRate,
  editBranchRate,
  Cashlist,
} from "../../api/api";
import querystring from "query-string";
import { Header, Indicator, Toast, InfiniteScroll } from "mint-ui";
import Footers from "./footer";

export default {
  name: "Me",
  components: {
    Footers,
  },
  data() {
    return {
      nickName: "",
      orderList: [],
      balance: "",
      inp1: "",
      inp2: "",
      pop: false,
      queryLoading: true,
      moreLoading: false,
      allLoaded: false,
      pageNo: 2,
      nothing: false,
      cashlist: [],
      listStatus: false,
    };
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
  },
  created() {},
  methods: {
    //分院我的
    branchOwner() {
      Indicator.open("加载中...");
      var params = {};
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      branchOwner(params, a).then((res) => {
        if (res.data.code == 1) {
          this.nickName = res.data.data.nickName;
          this.balance = res.data.data.balance;
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    //提现状态
    Cashlist() {
      var params = {};
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Cashlist(params, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.cashlist = res.data.data;
        }
      });
    },
    //查看提现状态
    lookStatus() {
      this.listStatus = true;
    },
    //退出
    Close() {
      this.listStatus = false;
    },
    //分院订单列表
    branchorderList() {
      var params = {
        pageNo: 1,
        branchId: JSON.parse(localStorage.getItem("user")).branchId,
        pageSize: 10,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      branchorder(params, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.orderList = res.data.data;
          if (this.orderList.length == 0) {
            this.nothing = true;
          } else {
            console.log(this.orderList.length);
            this.nothing = false;
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //点击抽成比列
    bili() {
      Indicator.open("加载中...");
      var params = {
        branchId: JSON.parse(localStorage.getItem("user")).branchId,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      viewBranchRate(params, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.pop = true;
          this.inp1 = res.data.data.firstRate;
          this.inp2 = res.data.data.secondRate;
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    //取消
    close() {
      this.pop = false;
    },
    //修改抽成比例
    ok() {
      Indicator.open("加载中...");
      var params = {
        firstRate: this.inp1,
        secondRate: this.inp2,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      editBranchRate(params, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.pop = false;
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    //跳转订单详情
    Details(item) {
      this.$router.push({
        path: "/Branch/details",
        query: { orderId: item.id },
      });
    },
    //提现
    Cashwithdrawal(balance) {
      console.log(balance);
      this.$router.push({
        path: "/Branch/withdraw",
        query: { accountBalance: balance },
      });
    },
    goout() {
      localStorage.clear();
      this.$router.push({ path: "/" });
    },
    //上拉加载
    getCardList() {
      if (this.allLoaded) {
        this.moreLoading = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoading = true;
      var params = {
        pageNo: this.pageNo,
        branchId: JSON.parse(localStorage.getItem("user")).branchId,
        pageSize: 10,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      branchorder(params, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNo += res.data.data.length;
            res.data.data.forEach((element) => {
              this.orderList.push(element);
            });
            this.moreLoading = false;
          } else {
            this.allLoaded = true;
            this.moreLoading = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
  },
  mounted() {
    this.branchOwner();
    this.branchorderList();
    this.Cashlist();
  },
};
</script>
<style lang="scss" scoped>
.me {
  width: 100%;
  height: auto;
  padding-bottom: 1.5rem;
}

.hom_back {
  width: 100%;
  height: 4.5rem;
}
.goout {
  position: absolute;
  display: flex;
  font-size: 0.25rem;
  color: #fff;
  top: 0.6rem;
  z-index: 1;
  right: 0.4rem;
  img {
    width: 0.26rem;
    height: 0.26rem;
    margin-top: 0.05rem;
    margin-right: 0.05rem;
  }
}
.hom_back img {
  width: 100%;
  height: 100%;
  position: relative;
}

.me_all {
  width: 100%;
  height: auto;
  position: absolute;
  top: 1.73rem;
}

.me_top {
  width: 100%;
  height: 1.5rem;
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0.87rem;
  box-sizing: border-box;
  padding-left: 0.28rem;
}

.me_name {
  margin-left: 0.28rem;
  font-size: 0.34rem;
  color: #fff;
}

.me_top .icon {
  width: 0.38rem;
  height: 0.38rem;
  margin-left: 0.19rem;
}

.me_online {
  position: absolute;
  top: 1.81rem;
  right: 0.38rem;
  font-size: 0.3rem;
  color: #fff;
}

.account {
  width: 6.9rem;
  height: auto;
  margin-left: 0.3rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  font-size: 0.28rem;
  position: absolute;
  top: 2.35rem;
  background: #fff;
  box-shadow: 0rem 0.04rem 0.68rem 0rem rgba(39, 52, 125, 0.25);
}
.balance {
  display: flex;
  justify-content: space-between;
  .look_status {
    font-size: 0.32rem;
    color: #ffa100;
    margin-top: 0.3rem;
  }
}

.account .balance .banl {
  box-sizing: border-box;
  padding-left: 0.39rem;
  height: 1.6rem;
}

.banl div:nth-of-type(1) {
  font-size: 0.32rem;
  margin-top: 0.3rem;
  font-weight: 600;
  display: flex;
  img {
    width: 0.47rem;
    height: 0.35rem;
    margin-top: 0.04rem;
    margin-right: 0.2rem;
  }
}

.banl div:nth-of-type(2) {
  font-size: 0.28rem;
  margin-top: 0.3rem;
}

.balance2 {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 1.16rem;
  background: #f5f6fb;
  box-sizing: border-box;
  border-radius: 0 0 0.2rem 0.2rem;
}

.balance2 div:nth-of-type(1) {
  font-size: 0.42rem;
  margin-top: 0.3rem;
}
.txt2 {
  margin-left: 0.4rem;
  margin-top: 0.3rem;
  width: 1.9rem;
  height: 0.31rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 162, 0, 1);
}
.balance2 div:nth-of-type(2) {
  width: 0.02rem;
  height: 0.78rem;
  background: #e8ebf5;
  margin-right: 0.56rem;
  margin-top: 0.2rem;
}

.balance2 div:nth-of-type(3) {
  font-size: 0.42rem;
  color: #ffa200;
  margin-right: 0.68rem;
  margin-top: 0.3rem;
}

.account .withdrawal {
  width: 1.5rem;
  height: 0.66rem;
  background: linear-gradient(
    -90deg,
    rgba(255, 167, 0, 1),
    rgba(255, 204, 0, 1)
  );
  border-radius: 0.33rem;
  margin-top: 100rem;
  margin-right: 0.2rem;
  padding: 0;
  line-height: 0.66rem;
}

.menu {
  width: 6.94rem;
  height: 1.92rem;
  background: #fff;
  position: absolute;
  top: 5.49rem;
  left: 0.3rem;
  display: flex;
  justify-content: space-around;
  margin-top: 0.3rem;
  box-shadow: 0rem 0.04rem 0.68rem 0rem rgba(39, 52, 125, 0.25);
  border-radius: 0.1rem;
}

.menu .menu_module {
  width: auto;
  height: 1.9rem;
  font-size: 0.28rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 0.45rem;
  padding-left: 0.24rem;
  padding-right: 0.31rem;
  text-align: center;
}

.menu_gang {
  height: 0.88rem;
  width: 0.02rem;
  background: #e8ebf5;
  margin-top: 0.54rem;
}

.menu_module span:nth-of-type(1) {
  font-size: 0.3rem;
}

.menu_module span:nth-of-type(2) {
  font-size: 0.2rem;
  margin-top: 0.13rem;
}

.menu_module span:nth-last-child(1) {
  font-size: 0.24rem;
  color: #ffb400;
  margin-top: 0.14rem;
}

.list {
  width: 6.9rem;
  height: auto;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
}

.list .li {
  width: 6.9rem;
  height: 0.7rem;
  border: 0.02rem solid #ccc;
  font-size: 0.28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list .li div:nth-child(1) {
  margin-left: 0.2rem;
}

.list .li div:nth-child(2) {
  margin-right: 0.2rem;
}

.tab {
  float: left;
  width: 24.2%;
  text-align: center;
  padding: 0.1rem 0;
  margin-top: 0.3rem;
  font-size: 0.28rem;
}

.topTabSwiper {
  zoom: 1;
  margin-top: 1.2rem;
}

.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}

.tabBorer {
  color: #ffb400;
  font-size: 0.28rem;
}
.ranking {
  width: 100%;
  height: 40vh;
  overflow-y: auto;
  img {
    margin: auto;
    width: 3.06rem;
    height: 2rem;
    margin-top: 1.8rem;
  }
}
.ranking_zi {
  text-align: center;
  margin-top: 0.1rem;
  font-size: 0.28rem;
}

.ran_oitem {
  width: 6.84rem;
  margin: auto;
  border: 0.02rem solid #cfcfcf;
  height: 1.1rem;
  line-height: 1.1rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.26rem;
  box-shadow: 0rem 0.04rem 0.28rem 0rem rgba(39, 52, 125, 0.05);
  border-radius: 0.16rem;
}

.back {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.back_tu {
  width: 6rem;
  height: 9.6rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.back .bc {
  width: 5.48rem;
  height: 6.91rem;
  display: block;
}

.back_bottom {
  width: 5.97rem;
  height: 2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0px 0px 0.32rem 0.32rem;
}

.back_title {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  margin-top: 0.39rem;
}

.back_title img:nth-child(1) {
  width: 0.58rem;
  height: 0.58rem;
}

.back_title img:nth-child(2) {
  width: 1.95rem;
  height: 0.31rem;
  margin-left: 0.11rem;
}

.back_bottom span {
  font-size: 0.24rem;
  font-family: Microsoft YaHei;
  color: #131010;
  margin-top: 0.23rem;
  font-weight: 400;
}

.back_bottom .liji {
  margin-top: 0.31rem;
  width: 5rem;
  height: 0.82rem;
  border: 0.02rem solid #f4d824;
  border-radius: 0.4rem;
  text-align: center;
  line-height: 0.82rem;
  font-size: 0.3rem;
  color: #f4d824;
  position: relative;
}

.lookstatus {
  font-size: 0.32rem;
  color: #ffa200;
  display: inline-block;
  margin-left: 3.5rem;
}

.txorder {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-end;
  z-index: 2;
}

.txorder .txorder_pop {
  width: 100%;
  height: 7.64rem;
  background: #fff;
  border-radius: 0.2rem 0.2rem 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  button {
    width: 100%;
    height: 0.74rem;
    background: #dddddd;
    font-size: 0.28rem;
    color: #000000;
    outline: none;
    border: none;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.txorder_list {
  width: 100%;
  height: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 0.3rem;
  color: #000;
}

.txorder_title {
  width: 100%;
  height: 6.03rem;
  overflow: auto;
}
.null {
  width: 100%;
  height: 6.03rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 3.06rem;
    height: 2rem;
  }
}

.txorder_li {
  width: 100%;
  height: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 0.3rem;
  color: #000;
  border-top: 0.02rem solid #ddd;
  .unfinished {
    color: #f4d824;
  }
  .success {
    color: #1db278;
  }
}

.pop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1010;
}

.pop .pop_message {
  width: 100%;
  height: 6.89rem;
  background: #fff;
  border-radius: 0.2rem 0.2rem 0 0;
  position: absolute;
  bottom: 0;
  font-size: 0.3rem;
}
.pop_oitem {
  width: 5rem;
  height: auto;
  margin: auto;
}
.pop_tuiguang {
  display: flex;
  margin-top: 0.84rem;
  justify-content: space-around;
  line-height: 0.72rem;
}
.pop_tuiguang input {
  width: 3.08rem;
  height: 0.72rem;
  border: 0.02rem solid #dddddd;
  text-align: center;
}
.pop_txt {
  margin-top: 0.8rem;
  font-size: 0.26rem;
  color: #666666;
}

.pop_di {
  width: 100%;
  height: 1.66rem;
  border-top: 0.02rem solid #dddddd;
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  padding-top: 0.4rem;
}
.pop_di button:nth-of-type(1) {
  width: 2.98rem;
  height: 0.76rem;
  line-height: 0.76rem;
  padding: 0;
  border-radius: 0.1rem;
  border: none;
  outline: none;
  background: #f2f2f2;
  font-size: 0.3rem;
  color: #000000;
}
.pop_di button:nth-of-type(2) {
  width: 2.98rem;
  height: 0.76rem;
  line-height: 0.76rem;
  padding: 0;
  border-radius: 0.1rem;
  border: none;
  outline: none;
  background: #ffa200;
  color: #ffffff;
  font-size: 0.3rem;
}
.wsui-btn__hover_list {
  opacity: 0.9;
  background: #ffa200;
  color: #fff;
}
</style>